<template>
  <div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="paginationData.currentPage"
        :page-sizes="[10,30, 50, 70, 100]"
        :page-size.sync="paginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    paginationData: {
      total: Number,
      currentPage: Number,
      pageSize: Number
    }
  },
  data() {
    return {};
  },
  methods: {
    /**
     * pageSize 改变时会触发时间
     * @param {object} pageSize 每页显示条目个数
     */
    handleSizeChange(pageSize) {
      this.$emit("size-change", pageSize);
    },
    /**
     * currentPage 改变时会触发事件
     * @param {Object} currentPage 当前页码
     */
    handleCurrentChange(currentPage) {
      this.$emit("current-change", currentPage);
    },
    // 上一页
    prev(val) {
      console.log(val);
    },
    // 下一页
    next(val) {
      console.log(val);
    }
  }
};
</script>

<style>
</style>